<template>
	<div class="integralShoppingMall">
		<div class="banner"><img class="banner_img" src=""></div>
		<nav>
			<ul class="navbar">
				<li v-for="(item, index) in classList" class="nav_item">
					<a @click='getProduct(item.categoryID, index);' v-bind:class="{active : (type == index)}">{{item.categoryName}}</a>
				</li>
			</ul>
		</nav>
		<div class="nav_container">
			<ul class="nav_container_list fix" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li class="productbar" v-for="item in productList">
					<router-link :to='{path: "integralCommodityDetail", query: {spu: item.spu}}'>
						<img class="product_img" :src="item.imageUrl">
						<div class="product_describe">
							<p class="product_name">{{item.goodsName}}</p>
							<p class="product_price fix">
								<span class="product_sapn1 fl">￥{{item.shopPrice}}+</span><span class="product_sapn2 fl">{{item.point}}积分</span>
							</p>
							<p class="product_lastprice">抵扣前￥{{item.marketPrice}}</p>
						</div>   
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
	data () {
		return {
			searchText:'请输入搜索关键词',
			type : 0,
			categoryID: '',
			pageNo: '1',
			productList:[],
			classList:'',
			bannerIntegralLi: []
		}
	},
	name: 'app',
	beforeCreate () {
		this.$nextTick(function () {
			this.getClass();
		});
	},
	methods:{

		getClass () {
			// 分类列表
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/point/category").then(function (res) {
				this.classList = res.body.content;
				this.getProduct(this.classList[0].categoryID, 0);
			});
			// banner 
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate_weixin").then(function (res) {
				this.bannerIntegralLi = res.body.content;
			});
		},

		getProduct (categoryID, index) {
			var _this = this;
			this.categoryID = categoryID;
			this.type = index;
			this.loadMore();
			// 商品列表
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/point/goods/"+this.categoryID+"/"+this.pageNo).then(function (res) {
				this.loading = false;
				_this.productList = res.body.content.rows;
				_this.pageCount = _this.productList.pageCount;
				_this.currentPage = _this.productList.currentPage;
			});
		},

		loadMore () {
			// if(this.categoryID != '') {
			// 	this.loading = true;
			// }else {
			// 	return false;
			// }
			// this[this.categoryID] = this[this.categoryID] ?  (this[this.categoryID] + 1) : 1;
			var _this= this;
			var scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var conHeight = (document.documentElement.clientHeight)*(this.currentPage) -90;
			if(scrolled > conHeight && this.currentPage < this.pageCount){
				_this.pageNo++;
					// 商品列表
					this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/point/goods/"+this.categoryID+"/"+this.pageNo).then(function (res) {
						for(var i=0; i<res.body.content.rows.length; i++){
						_this.productList.push(res.body.content.rows[i]);
					};
				});
			}

		}
	}
}
</script>
<style lang="scss">
.integralShoppingMall{
	background: #fff;
	.banner{ width: 100%; height: 3.3rem; background: #fff; }
	.banner_img{ display: block; width: 7.5rem; height: 3.3rem; }
	nav{
		height: 0.9rem; overflow-y: hidden; background: #fff; border-bottom: 1px solid #f1f1f1;
		.navbar{ padding-left: 0.24rem; overflow-x: auto; white-space: nowrap; }
		.nav_item{
			display: inline-block; width: 1.6rem; height: .9rem;position: relative;
			a{position: absolute;width: 100%;top:0;left: 0; display: block; margin: 0 auto;height: 0.9rem;line-height: .9rem; font-size: 0.28rem; text-align: center; }
		}
		.active{ color: #ff365d; }
		.active:after{display: block;content: ''; position: absolute;height: .02rem; width:100%;background: #ff365d; left: 0;bottom: 0;}
	}
	.nav_container{ height: 9.1rem; overflow: scroll; }
	.nav_container_list{ padding-top: 0.18rem; background: #fff; }
	.productbar{ float: left; margin: 0.3rem 0 0 0.3rem; width: 3.3rem; height: 5.4rem; }
	.product_img{ display: block; width: 3.3rem; height: 3.3rem; }
	.product_describe{ height: calc(2.1rem - 1px); border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
	.product_name{ margin: 0 auto; padding-top: 0.28rem; width: 2.7rem; height: 0.84rem; line-height: 0.42rem; font-size: 0.22rem; color: #3e3e3e; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
	.product_price{ padding: 0.08rem 0 0 0.3rem; height: 0.32rem; }
	.product_sapn1{ line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; }
	.product_sapn2{ display: block; width: 0.98rem; height: 0.28rem; line-height: 0.28rem; text-align: center; font-size: 0.2rem; color: #fff; background: #ff365d; }
	.product_lastprice{ padding: 0.16rem 0 0 0.3rem; height: 0.22rem; line-height: 0.22rem; font-size: 0.22rem; color: #999; }
}
</style>